<template>
  <el-card shadow="never" class="card_tb" :key="tableProps.name">
    <div class="content-form">
      <slot name="tableTop"> </slot>
      <el-table stripe :height="tableHeight" ref="multipleTableRef" :data="tableData" v-loading="loading">
        <!-- <el-table-column
         tableHeight
        type="index"
        :index="totalIndex"
        width="55"
        label="序号"
        stripe
        align="center"
      /> -->
        <template v-for="item in tableProps.propsList" :key="item.prop">
          <template v-if="item.type === 'timer'">
            <el-table-column v-bind="item" align="center" show-overflow-tooltip>
              <!-- <template #default="{ row }">
                {{ editDate(row[item.prop]) }}
              </template> -->
            </el-table-column>
          </template>
          <template v-else-if="item.type === 'status'">
            <el-table-column v-bind="item" align="center" show-overflow-tooltip>
              <template #default="{ row }">
                {{ handStatus(row, item) }}
              </template>
            </el-table-column>
          </template>
          <!-- 白名单省市 -->
          <template v-else-if="item.type === 'white-location'">
            <el-table-column v-bind="item" align="center" show-overflow-tooltip>
              <template #default="{ row }">
                {{ handLocation(row, item) }}
              </template>
            </el-table-column>
          </template>
          <!-- 回显数据统一处理 -->
          <template v-else-if="item.type === 'dispose'">
            <el-table-column v-bind="item" align="center" show-overflow-tooltip>
              <template #default="{ row }">
                {{ disposeData(row, item) }}
              </template>
            </el-table-column>
          </template>

          <template v-else-if="item.type === 'normal'">
            <el-table-column v-bind="item" align="center" show-overflow-tooltip>
              <template #default="{ row }">

                {{ row[item.prop] }}

              </template>
            </el-table-column>
          </template>
          <template v-else-if="item.type === 'image'">
            <el-table-column v-bind="item" align="center" show-overflow-tooltip>
              <template #default="{ row }">
                <!-- {{ row }} -->

                <el-image v-if="row.productAttachmentList" style="width: 40px; height: 40px"
                  :src="row.productAttachmentList[0].attachmentUri"
                  :previewSrcList="[row.productAttachmentList[0].attachmentUri]" fit="cover" :zoom-rate="1.2"
                  :max-scale="7" :min-scale="0.2" :preview-teleported="true">
                </el-image>
                <span v-else></span>
              </template>
            </el-table-column>
          </template>
          <template v-else-if="item.type === 'custom'">
            <!-- v-bind 会把item 全部动态绑定再ei- item -->
            <el-table-column v-bind="item" align="center" show-overflow-tooltip>
              <!-- 通过插槽来操作内容 ,尽量不要解构!  所有东西都传递到scope上-->
              <template #default="scope">
                <slot :name="item.slotName" v-bind="scope" :props="item" :slotCode="'这是自定义内容'"></slot>
              </template>
            </el-table-column>
          </template>
          <template v-else-if="item.type === 'handle'">
            <el-table-column v-bind="item" align="center" fixed="right">
              <template #default="{ row }">
                <template v-for="t in item.list" :key="t.name">
                  <template v-if="t.name == '删除'">
                    <el-popconfirm width="180" confirm-button-text="确定" cancel-button-text="取消"
                      :icon="CircleCloseFilled" icon-color="#f56c6c" title="确定删除吗?" @confirm="handTableRow(t, row)">
                      <template #reference>
                        <el-button size="small" text v-permission="`${t.code}`" type="danger">
                          <!-- <span style="color: #409eff">
                          </span> -->
                          {{ t.name }}
                        </el-button>
                      </template>
                    </el-popconfirm>
                  </template>

                  <template v-else>
                    <el-button size="small" text @click="handTableRow(t, row)" v-permission="`${t.code}`">
                      <span style="color: #409eff">
                        {{ t.name }}
                      </span>
                    </el-button>
                  </template>
                </template>
              </template>
            </el-table-column>
          </template>

          <template v-else>
            <el-table-column v-bind="item" align="center" show-overflow-tooltip />
          </template>
        </template>
      </el-table>
    </div>

    <div class="pagination mt-10">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
        :page-sizes="[100, 200, 300, 400]" size="small"  
        layout="total, sizes, prev, pager, next, jumper" :total="pageTotal" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />

    </div>
  </el-card>
</template>
<!-- 
handle 操作区域
custom  通过插槽作用域传参再父类组件实现特殊逻辑
dispose 回显数据转换

 -->

<script setup lang="ts">
import { ref, watch, onUnmounted, onMounted, nextTick } from "vue"
import { CircleCloseFilled } from "@element-plus/icons-vue"
import { useColorStore } from "@/store/common"
import { storeToRefs } from "pinia"
const commonStore = useColorStore()
const { ispSelectList, province } = storeToRefs(commonStore)
const { filterData } = commonStore
const props = defineProps<Iprops>()

let currentPage = ref(1) // 当前页码
let pageSize = ref(10) // 每页数据
let tableHeight = ref(400)
// 取配置项值
interface Iprops {
  // tableHeight?:number
  initParams?: any
  name?: string
  tableData: any[]
  pageTotal?: number | string
  loading?: boolean
  tableProps: {
    name: string
    propsList: any[]
    tableSize: string
  }
}

watch(
  () => props.tableData,
  async () => { }
)
/*高度适配*/
let handTableheight = (num = 70) => {
  console.log("-->>>");
  console.log("===11111111");

  const dom = document.querySelector(".card_tb") as HTMLElement
  console.log(dom.offsetHeight);

  if (!dom) return

  tableHeight.value = dom.offsetHeight - num
}
const handuseResize = (num: any) => {
  console.log("===22222222");

  handTableheight(num)
  window.addEventListener("resize", handTableheight(num))
}

onUnmounted(() => {
  window.removeEventListener("resize", handTableheight)
})
const emit = defineEmits(["editUser", "my-btn", "get-page", "handTableRow"])
/*状态统一处理*/
const handStatus = (row: any, item: any) => {
  if (
    item.prop == "isShow" ||
    item.prop == "isStatistics" ||
    item.prop == "isUnsubscribe"
  ) {
    let target = row[item.prop]
    if (target) {
      return target == 1 ? "是" : "否"
    } else {
      return "未知"
    }
  } else if (item.prop == "orderStatus") {
    let options = [
      { key: 1, value: "初始化", id: 1 },
      { key: 2, value: "初始化成功", id: 2 },
      { key: 3, value: "初始化失败", id: 3 },
      { key: 4, value: "订购中", id: 4 },
      { key: 5, value: "订购成功", id: 5 },
      { key: 6, value: "订购失败", id: 6 },
      { key: 7, value: "其他", id: 7 }
    ]

    let target = row[item.prop]
    let obj = options.find((item) => item.key == target)
    if (obj) {
      return obj.value
    } else {
      return "未知状态"
    }
  }
}
/*白名单省市*/
const handLocation = (row: any, item: any) => {
  if (item.prop == "whiteListProvince") {
    let code = row[item.prop]
    let target = province.value.filter((item: any) => item.dictItemCode == code)
    if (target.length !== 0) {
      return target[0].dictItemName ? target[0].dictItemName : "-"
    }
  } else {
    let code = row["whiteListProvince"]
    let city = row[item.prop]
    if (code) {
      let arr = filterData(1, null, code)
      if (arr.length !== 0) {
        let obj = arr[0].childrenDictItemList.find(
          (item: any) => item.dictItemCode == city
        )
        return obj.dictItemName
      }
    }
  }
}
/*回显数据统一处理*/
const disposeData = (row: any, item: any) => {
  if (item.prop == "isp") {
    if (row[item.prop]) {
      let target = ispSelectList.value.filter((t) => t.key == row[item.prop])
      if (target.length !== 0) {
        return target[0].value
      }
    }
  }
}

/*页码*/
const handleSizeChange = () => {
  let params = {
    page: currentPage.value,
    size: pageSize.value
  }
  emit("get-page", params)
}
const handleCurrentChange = () => {
  let params = {
    page: currentPage.value,
    size: pageSize.value
  }
  emit("get-page", params)
}
const initPagination = () => {
  currentPage.value = 1
  pageSize.value = 20
}

const handTableRow = (btn: any, row: any) => {
  emit("handTableRow", btn, row)
}

defineExpose({
  initPagination,
  handTableheight,
  handuseResize
})
</script>

<style></style>

<style lang="scss" scope>
.card_tb {
  flex-grow: 1;
  margin-top: 10px;


}

.content-form {
  height: 100%;
  // padding: 10px;
  // background-color: red;
  // overflow-y: scroll;
}

.pagination {
  // margin-top: 10px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
